<script setup lang="ts">
import goodWhite from "@@/assets/images/layouts/good-white.png";
import goodGray from "@@/assets/images/layouts/good-gray.png";
import starWhite from "@@/assets/images/layouts/star-white.png";
import starGray from "@@/assets/images/layouts/star-gray.png";
import commentGray from "@@/assets/images/layouts/commentGray.png";
import shareGray from "@@/assets/images/layouts/shareGray.png";
import groupGray from "@@/assets/images/layouts/groupGray.png";
import linkGray from "@@/assets/images/layouts/linkGray.png";
import goodBlue from "@@/assets/images/layouts/good-blue.png";
import starBlue from "@@/assets/images/layouts/star-blue.png";
import pdfFileUrlExample from "@@/assets/huazhuangpinPdf.pdf";
import Head from "@@/components/Head/index.vue"
import Footer from "@@/components/footer/index.vue"

import { onBeforeMount, onMounted, ref, shallowReactive } from "vue"
import {articleDetailApi, doCollectApi, doLikeApi, doUnLikeApi, getIndexFourBannerApi, sendCommentApi} from "@/api"
import { useUserStore } from "@/pinia/stores/user.ts"
import Swiper from "./Swiper.vue"
import {removeToken} from "@@/utils/cache/cookies.ts";
const userStore = useUserStore()
const token = ref("")
const username = ref("")
const user_id = ref(0)
const route = useRoute()
const router = useRouter()
const id = ref("")
const text = ref("")
const relatedListShow = ref(1) // 相关文章展示1: 1-10条 ，2: 11-20条
const hotListShow = ref(1) // 相关文章展示1: 1-10条 ，2: 11-20条
const commentDialog = ref(false)
const noteMakeDialog = ref(false)
const commentForm = ref('')
const commentImgList = ref([]) // 评论图片列表
const moreCommentImgList = ref([]) // 更多评论图片列表
const currentCommentImgNumber = ref(0) // 当前图片索引
const uploadUrl = ref("https://www.sacasaca.com/shop122/uploadfile")
const noteContentForm = ref('')
const fourBannerList = ref<any[]>([])
const detailData = ref({
    id: "",
    title: "",
    content: "",
    description: "",
    isDoLike: 0,
    isDoCollected: 0,
    source_url: "",
    source_author: "",
    hot_value: "",
    collect_num: 0,
    good_num: 0,
    like_num: 0,
    comment_num: 0,
    share_num: 0,
    create_time: ""
  }
)
const images = ref<any[]>([])
const formSendData = ref({
  id: null
})
const goodImg = ref(goodGray)
const starImg = ref(starGray)
const commentImg = ref(commentGray)
const shareImg = ref(shareGray)
const groupImg = ref(groupGray)
const linkImg = ref(linkGray)
// 标注
const selectedText = reactive({
  start: 0,
  end: 0,
  content: '',
})
const TAG_WIDTH = 280 //自定义最大范围，以保证不超过内容的最大宽度

type TTag = {
  tag_name: string
  tag_id: string
  tag_color: string
}

type TSelectText = {
  tag_id: string
  tag_name: string
  tag_color: string
  start: number
  end: number
  mark_content: string
  mark_id: string
}

const selectedTextList = ref<TSelectText[]>([])
const markContent = ref(
  ''
)

const tagInfo = ref({
  visible: false,
  top: 0,
  left: 0,
})

//获取选取的文字数据
function getSelectedTextData() {
  const select = window?.getSelection() as any
  const nodeValue = select.focusNode?.nodeValue
  const anchorOffset = select.anchorOffset
  const focusOffset = select.focusOffset
  const nodeValueSatrtIndex =  1 // markContent.value?.indexOf(nodeValue)
  selectedText.content = select.toString()
  console.log(selectedText.content )
  noteContentForm.value = selectedText.content
  if (selectedText.content.length > 0) {
    noteMakeDialog.value = true
  }
  if (anchorOffset < focusOffset) {
    //从左到右标注
    selectedText.start = nodeValueSatrtIndex + anchorOffset
    selectedText.end = nodeValueSatrtIndex + focusOffset
  } else {
    //从右到左
    selectedText.start = nodeValueSatrtIndex + focusOffset
    selectedText.end = nodeValueSatrtIndex + anchorOffset
  }
}
function loadImages() {
  getIndexFourBannerApi({page:1, limit:4, area: 2}).then(res => {
    // 循环添加数据
    for (let i in res.data) {
      fourBannerList.value.push(res.data[i])
      images.value.push({
        title: res.data[i].title,
        link: res.data[i].visit_link,
        src: res.data[i].img
      })
    }
  })
}
function changeRelate() {
  if (relatedListShow.value == 1) {
    relatedListShow.value = 2
  } else {
    relatedListShow.value = 1
  }
}

function changeHot() {
  if (hotListShow.value == 1) {
    hotListShow.value = 2
  } else {
    hotListShow.value = 1
  }

}
onBeforeMount(() => {
  id.value = route.params.id
  if (!id.value) {
    alert('参数错误！');
  }
  username.value = userStore.getUserName().value
  user_id.value = userStore.getUserId().value
  token.value = userStore.token
  loadImages()
})

onMounted(() => {
  getNewsOne()
  const el = document.getElementById('text-container')
  //鼠标抬起
  el?.addEventListener('mouseup', (e) => {
    const text = window?.getSelection()?.toString() || ''
    if (text.length > 0) {
      const left = e.offsetX < TAG_WIDTH ? 0 : e.offsetX - 300
      tagInfo.value = {
        visible: true,
        top: e.offsetY + 40,
        left: left,
      }
      getSelectedTextData()
    } else {
      tagInfo.value.visible = false
    }
  })
})
function  handleUpdate(annotations) {
  console.log(annotations);
}
function logout() {
  token.value = ""
  username.value = ""
  removeToken()
  userStore.setToken("") // token-admin
  userStore.setUsername("")
  userStore.setUserId(0)
}

function getNewsOne() {
  const data2 = { id: Number.parseInt(route.params.id), user_id: user_id.value }
  articleDetailApi(data2).then(({ data, code }) => {
    if (code === 0) {
      detailData.value.id = data.id
      detailData.value.title = data.title
      detailData.value.content = data.content
      detailData.value.description = data.description
      detailData.value.isDoLike = data.is_liked
      detailData.value.isDoCollected = data.is_collected
      detailData.value.collect_num = data.collect_num
      detailData.value.good_num = data.good_num
      detailData.value.comment_num = data.comment_num
      detailData.value.share_num = data.share_num
      detailData.value.source_url = data.source_url
      detailData.value.source_author = data.source_author
      detailData.value.hot_value = data.hot_value + data.collect_num + data.share_num + data.good_num  + data.comment_num
      detailData.value.create_time = data.create_time ? data.create_time.substring(0, 10).replaceAll('-', '.') : ''

    }
    // list.value = Data
  }).catch((data) => {
    console.log(data)
  }).finally(() => {
  })
}
function goToUrl(t) {
  const route = router.resolve({
    path: t
  })
  window.open(route.href, '_blank')
}
function showShareDialog(pid) {
  if ( token.value == "" || userStore.getUserId().value == 0) {
    ElMessage.error({
      message: "请先登录，再打卡！",
      type: "success",
      duration: 2000
    })
    return
  }
  const data4 = {
    source_id: pid,
    user_id: userStore.getUserId().value,
    ctype: 2,
    img_list: "",
    action: 5 // 分享标记
  }
  doLikeApi(data4).then(({ code }) => {
    if (code == 0) {
      detailData.value.share_num = detailData.value.share_num + 1
      console.log(detailData.value.share_num)
    }
  })
}
function copyText () {
  try {
    navigator.clipboard.writeText('https://sacasaca.com/#/detail/' + route.params.id);
    alert('分享链接获取成功！' + 'https://sacasaca.com/#/detail/' + route.params.id);
  } catch (err) {
    console.error('复制失败', err);
    alert('复制失败，请重试');
  }
  showShareDialog(route.params.id)
}
const navigation = shallowReactive<{ [key: string]: any }>({})
function onBroadcastSwiper(swiper: any) {
  navigation.prevEl = swiper.navigation.prevEl
  navigation.prevEl.style.display = "block"
  navigation.nextEl = swiper.navigation.nextEl
  navigation.nextEl.style.display = "block"
}
function study(pid) {
  const data2 = {
    source_id: pid,
    user_id: userStore.getUserId().value,
    ctype: 3,
    action: 3
  }
  if ( token.value == "" || userStore.getUserId().value == 0) {
    ElMessage.error({
      message: "请先登录，再打卡！",
      type: "success",
      duration: 2000
    })
    return
  }
  doLikeApi(data2).then((data) => {
    ElMessage.success({
      message: "恭喜你，日日精进，已载入学习轨迹！",
      type: "success",
      duration: 2000
    })
  })
}
function changeMouseOver(type) {
}
function cancelComment() {
  commentForm.value =  ""
  commentDialog.value = false
}
function cancelNoteMake() {
  noteMakeDialog.value = false
}
/** 提交评论 */
function handleComment() {
  console.log(token.value)
  if( token.value == "") {
    return ElMessage.error({
      message: "请先登录",
      type: "warning",
      duration: 2000
    })
  }
  // 处理上传的图片 commentImgList去除空元素
  commentImgList.value.forEach((item) => {
    if (item === "") {
      commentImgList.value.splice(commentImgList.value.indexOf(item), 1)
    }
  })
  if(commentForm.value !== "") {
    const data2 = {
      source_id: formSendData.value.id,
      contents: commentForm.value,
      user_id: userStore.getUserId().value,
      ctype: 2,
      img_list: commentImgList.value.join( ","), // 多图列表
      action: 2
    }
    sendCommentApi(data2).then((data) => {
      detailData.value.comment_num = detailData.value.comment_num + 1
      commentDialog.value = false
      commentForm.value =  ""
      ElMessage.success({
        message: "评论成功",
        type: "success",
        duration: 2000
      })
    })
  } else {
    ElMessage.error({
      message: "请输入评论内容",
      type: "warning",
      duration: 2000
    })
  }
}

/** 提交笔记 */
function handleNoteSave() {
  if( token.value == "") {
    return ElMessage.error({
      message: "请先登录",
      type: "warning",
      duration: 2000
    })
  }
  if(noteContentForm.value !== "") {
    const data2 = {
      source_id: id.value,
      contents: noteContentForm.value,
      user_id: userStore.getUserId().value,
      ctype: 100,
      img_list: "",
      action: 100
    }
    sendCommentApi(data2).then((data) => {
      detailData.value.comment_num = detailData.value.comment_num + 1
      noteMakeDialog.value = false
      commentForm.value =  ""
      ElMessage.success({
        message: "笔记保存成功",
        type: "success",
        duration: 2000
      })
    })
  }
}
// ctype  类型:1课程,2资讯,3语料,4问题,11原文卡,12要素卡,13摘要卡,14应询卡,5其他
// action 操作类型:1点赞,2踩一脚,3收藏,4打卡,5其他
function doLike(pid) {
  if( token.value == "" || userStore.getUserId().value == 0) {
    return ElMessage.error({
      message: "请先登录",
      type: "warning",
      duration: 2000
    })
  }
  if( pid == "" || !pid) {
    return ElMessage.error({
      message: "ID参数错误",
      type: "warning",
      duration: 2000
    })
  }
  const data2 = {
    source_id: pid,
    user_id: userStore.getUserId().value,
    ctype: 2,
    action: 1
  }
  doLikeApi(data2).then(({ code, msg }) => {
    if (code == 0) {
      detailData.value.isDoLike = 1
      detailData.value.good_num = detailData.value.good_num + 1
      ElMessage.success({
        message: "点赞成功",
        type: "success",
        duration: 2000
      })
    } else {
      ElMessage.error({
        message: msg,
        type: "warning",
        duration: 2000
      })
    }
  })
}


function doUnLike(pid, action) {
  if( token.value == "" || userStore.getUserId().value == 0) {
    return ElMessage.error({
      message: "请先登录",
      type: "warning",
      duration: 2000
    })
  }
  if( pid == "" || !pid) {
    return ElMessage.error({
      message: "ID参数错误",
      type: "warning",
      duration: 2000
    })
  }
  const data2 = {
    source_id: pid,
    user_id: userStore.getUserId().value,
    ctype: 2,
    action: action
  }
doUnLikeApi(data2).then(({ code, msg }) => {
    if (code == 0) {
      if (action === 1) {
        detailData.value.isDoLike = 0
        detailData.value.good_num = detailData.value.good_num - 1
        ElMessage.success({
          message: "取消点赞成功",
          type: "success",
          duration: 2000
        })
      } else if (action === 3) {
        detailData.value.isDoCollected = 0
        detailData.value.collect_num = detailData.value.collect_num - 1
        ElMessage.success({
          message: "取消收藏成功",
          type: "success",
          duration: 2000
        })
      }
    } else {
      ElMessage.error({
        message: msg,
        type: "warning",
        duration: 2000
      })
    }
  })
}

function doCollect(pid) {
  if( token.value == "" || userStore.getUserId().value == 0) {
    return ElMessage.error({
      message: "请先登录",
      type: "warning",
      duration: 2000
    })
  }
  const data2 = {
    source_id: pid,
    user_id: userStore.getUserId().value,
    ctype: 2,
    action: 3
  }
  doCollectApi(data2).then(({ code, msg }) => {
    if (code == 0) {
      detailData.value.isDoCollected = 1
      detailData.value.collect_num = detailData.value.collect_num + 1
      ElMessage.success({
        message: "收藏成功",
        type: "success",
        duration: 2000
      })
    } else {
      ElMessage.error({
        message: msg,
        type: "warning",
        duration: 2000
      })
    }
  })
}
function showCommentDialog(pid) {
  // console.log(token.value)
  if( token.value == "" || userStore.getUserId().value == 0) {
    return ElMessage.error({
      message: "请先登录",
      type: "warning",
      duration: 2000
    })
  }
  formSendData.value.id = pid
  console.log(formSendData.value.id )
  commentDialog.value = true
}
const tagList: TTag[] = [
  // {
  //   tag_name: '标签一',
  //   tag_color: `#DE050CFF`,
  //   tag_id: 'tag_id1',
  // },
]

function beforePhotoUpload(file) {
  // console.log(file)
  const isJPEG = file.type === 'image/jpeg';
  const isJPG = file.type === 'image/jpg';
  const isPNG = file.type === 'image/png';
  // const isLt1M = file.size / 1024 / 1024 < 50;
  // if (!isJPG && !isPNG && !isJPEG) {
  // }
  return isJPG || isPNG || isJPEG;
}
function photoUploadSuccess(res, file) {
  if (res.code == 0) {
    console.log("photoUploadSuccess");
    console.log(currentCommentImgNumber.value)
    // 已经存在的方格里上传图片
    if (commentImgList.value.length == 0) {
      commentImgList.value.push(res.data.url)
      moreCommentImgList.value.push('')
    }else if (commentImgList.value.length > 0 && currentCommentImgNumber.value == commentImgList.value.length) {
      commentImgList.value.push(res.data.url)
      moreCommentImgList.value.push('')
    } else {
      commentImgList.value[currentCommentImgNumber.value] = res.data.url
    }
  }
}

function handleChange(index) {
  currentCommentImgNumber.value = index
  console.log(index)
}
const changeCloseState = (id, state) => {
  if (state == 0) {
    document.getElementById("close"  + id).style.opacity = "0";
  } else {
    document.getElementById("close"  + id).style.opacity = "1";
  }
}
function removeImage(file) {
  if (file == 0) {
    commentImgList.value[0] = ''
  } else {
    commentImgList.value[file] = ''
  }
}
</script>
<template>
  <div class="container_info">
    <Head :activeId="2" />
    <div>
      <Flex vertical gap="middle">
        <Swiper
          :images="images"
          mode="banner"
          :pagination="{
                dynamicBullets: true,
                clickable: true
              }"
          :height="552"
          :slides-per-view="1"
          :space-between="0"
          navigation
          mousewheel
          @swiper="onBroadcastSwiper"
        />
      </Flex>
    </div>
    <div v-if="tagList.length > 0" >
      <div v-for="i in tagList" :key="i.tag_id" class="tag-name">
          <p>{{ i.tag_name }}</p>
      </div>
    </div>
    <div class="module-container">
      <div class="module-left">
        <div class="module-one" style="margin-top: 20px;  margin-bottom: 20px;"  id="text-container">
          <div style="font-size: 16px; font-weight: bolder;height: 40px; line-height: 40px; margin-top: 20px;  margin-bottom: 10px;" >
            {{ detailData.title }}
          </div>
          <div class="news_origin">
            <div class="news_origin1">来源: {{detailData.source_author}}</div>
            <div class="news_origin1">
              时间: {{detailData.create_time}}
            </div>
            <div class="news_origin1">
              热度: {{detailData.hot_value}}
            </div>
          </div>
          <div style="text-indent: 20px;font-size: 15px;line-height: 28px;">
            <div style="text-indent: 20px;font-size: 15px;line-height: 28px;font-weight: 500;">
              <p style="text-indent: 0;font-size: 15px;line-height: 28px;font-weight: 500;">摘要：</p>
              <p style="font-weight: 500;">{{detailData.description}}</p>
            </div>
            <div style="text-indent: 20px;font-size: 15px;line-height: 28px;">
              <p style="text-indent: 0;font-size: 15px;line-height: 28px;">正文：</p>
            </div>
            <div style="width: 85%;height: 822px;">
              <iframe :src="pdfFileUrlExample" frameborder="0" style="width: 100%; height: 800px"></iframe>
            </div>
            <div style="text-indent: 20px;font-size: 15px;line-height: 28px; text-align: justify;" v-html="detailData.content"></div>
          </div>
        </div>
        <div style="width: 90%;height: 60px;">
          <el-button size="large" type="primary" style="width:754px;font-size: 16px;" @click="study(detailData.id)">学习打卡</el-button>
        </div>
        <div class="info-content" style="height: 60px;margin-bottom: 60px;">
          <div class="left" style="width: 100%;display: flex;flex-direction: row;justify-content: space-evenly" >
            <div class="item" v-if="detailData.isDoLike == 0">
              <a href="javascript:void(0)" @click="doLike(detailData.id)" @mouseover="changeMouseOver(1)" @mouseout="changeMouseOver(2)" class="item-like-a">
                <div class="img-1">
                  <img :src="goodImg" class="img1" />
                </div>
                点赞 ({{detailData.good_num}})
              </a>
            </div>
            <div class="item isup item-like" v-if="detailData.isDoLike == 1" @click="doUnLike(detailData.id, 1)">
              <a href="javascript:void(0)"  @mouseover="changeMouseOver(1)" @mouseout="changeMouseOver(2)" class="item-like-a">
                <div class="img-1">
                  <img :src="goodBlue" class="img1" />
                </div>
                点赞 ({{detailData.good_num}})
              </a>
            </div>
            <div class="item">
              <a href="javascript:void(0)" @click="showCommentDialog(id)" @mouseover="changeMouseOver(5)" @mouseout="changeMouseOver(6)" class="item-like-a">
                <div class="img-1">
                  <img :src="commentImg" class="img1" />
                </div>
                评论 ({{detailData.comment_num}})
              </a>
            </div>
            <div class="item">
              <a href="javascript:void(0)" @click="copyText()" @mouseover="changeMouseOver(7)" @mouseout="changeMouseOver(8)" class="item-like-a">
                <div class="img-1">
                  <img :src="shareImg" class="img1" />
                </div>
                分享 ({{detailData.share_num}})
              </a>
            </div>
            <div class="item" v-if="detailData.isDoCollected == 0">
              <a href="javascript:void(0)" @click="doCollect(id)" @mouseover="changeMouseOver(3)" @mouseout="changeMouseOver(4)" class="item-like-a">
                <div class="img-1">
                  <img :src="starImg" class="img1" />
                </div>
                收藏 ({{detailData.collect_num}})
              </a>
            </div>
            <div class="item item-like"  @click="doUnLike(detailData.id, 3)" v-if="detailData.isDoCollected == 1">
              <a href="javascript:void(0)" class="item-like-a">
                <div class="img-1">
                  <img :src="starBlue" class="img1" />
                </div>
                收藏 ({{detailData.collect_num}})
              </a>
            </div>
            <div class="item" v-if="detailData.source_url != ''">
              <a :href="detailData.source_url" @mouseover="changeMouseOver(11)" @mouseout="changeMouseOver(12)" class="item-like-a">
                <div class="img-1">
                  <img :src="linkImg" class="img1" />
                </div>
                原文链接
              </a>
            </div>
            <div class="item">
              <a href="javascript:void(0)" @click="goToUrl('/friend')" @mouseover="changeMouseOver(13)" @mouseout="changeMouseOver(14)" class="item-like-a">
                <div class="img-1">
                  <img :src="groupImg" class="img1" />
                </div>
                学友圈
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="module-right">
        <div class="module-right-1 hot-box">
          <div class="row1" style="display: flex;flex-direction: row;align-items: center;">
            <img src="" class="img2" />
            <div class="relate_title">
              相关文章
            </div>
            <div class="relate_title2" @click="changeRelate">
              <i class="icon1"></i>
              <span>换一批</span>
            </div>
          </div>

          <div v-if="relatedListShow == 1">
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 1.</div>
              <div class="text2">相关文章：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 2.</div>
              <div class="text2">相关文章：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 3.</div>
              <div class="text2">相关文章：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 4.</div>
              <div class="text2">相关文章：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 5.</div>
              <div class="text2">相关文章：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 6.</div>
              <div class="text2">相关文章：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 7.</div>
              <div class="text2">相关文章：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 8.</div>
              <div class="text2">相关文章：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 9.</div>
              <div class="text2">相关文章：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 10.</div>
              <div class="text2">相关文章：2022年国家... </div>
            </a>
          </div>
          <div v-if="relatedListShow == 2">
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 11.</div>
              <div class="text2">相关文章：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 12.</div>
              <div class="text2">相关文章：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 13.</div>
              <div class="text2">相关文章：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 14.</div>
              <div class="text2">相关文章：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 15.</div>
              <div class="text2">相关文章：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 16.</div>
              <div class="text2">相关文章：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 17.</div>
              <div class="text2">相关文章：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 18.</div>
              <div class="text2">相关文章：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 19.</div>
              <div class="text2">相关文章：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 20.</div>
              <div class="text2">相关文章：2022年国家... </div>
            </a>
          </div>
        </div>

        <div class="module-right-1 hot-box" style=" margin-top: 16px;">
          <div class="row1" style="display: flex;flex-direction: row;align-items: center;">
            <img src="" class="img2" />
            <div style=" font-size: 18px; color: #333333; line-height: 38px; font-weight: 700; padding-left: 10px;align-items: center;">
              热度榜
            </div>
            <div class="relate_title2" @click="changeHot">
              <i class="icon1"></i>
              <span>换一批</span>
            </div>
          </div>
          <div v-if="hotListShow == 1">
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 1.</div>
              <div class="text2">国家药监局：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 2.</div>
              <div class="text2">国家药监局：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 3.</div>
              <div class="text2">国家药监局：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 4.</div>
              <div class="text2">国家药监局：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 5.</div>
              <div class="text2">国家药监局：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 6.</div>
              <div class="text2">国家药监局：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 7.</div>
              <div class="text2">国家药监局：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 8.</div>
              <div class="text2">国家药监局：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 9.</div>
              <div class="text2">国家药监局：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 10.</div>
              <div class="text2">国家药监局：2022年国家... </div>
            </a>
          </div>
          <div v-if="hotListShow == 2">
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 11.</div>
              <div class="text2">国家药监局：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 12.</div>
              <div class="text2">国家药监局：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 13.</div>
              <div class="text2">国家药监局：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 14.</div>
              <div class="text2">国家药监局：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 15.</div>
              <div class="text2">国家药监局：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 16.</div>
              <div class="text2">国家药监局：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 17.</div>
              <div class="text2">国家药监局：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 18.</div>
              <div class="text2">国家药监局：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 19.</div>
              <div class="text2">国家药监局：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 20.</div>
              <div class="text2">国家药监局：2022年国家... </div>
            </a>
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
  <el-dialog v-model="commentDialog" :width="550" title="评论" body-class="custom-body-class">
    <el-form ref="commentFormRef" label-width="80">
      <el-form-item label="评论内容">
        <el-input type="textarea" :rows="3" style="border-radius: 4px;border: 1px solid #f19a9a" resize='none' autocomplete="off" v-model="commentForm" placeholder="请输入评论内容"></el-input>
      </el-form-item>
      <el-form-item label="图片">
        <div style="margin-right: 8px;">
          <el-upload class="avatar-uploader"  :action="uploadUrl" name="imgFile"
                     :on-success="photoUploadSuccess" :before-upload="beforePhotoUpload"  @change="handleChange(0)"
                     list-type="picture-card" :auto-upload="true"
                     :show-file-list="false" accept=".jpg,.png,.jpeg">
            <div v-if="commentImgList.length == 0 || commentImgList[0]== ''" class="el-upload__tip">+</div>
            <img @mouseout="changeCloseState(0,0)" @mouseover="changeCloseState(0,1)" v-if="commentImgList[0]" :src="commentImgList[0]" class="avatar"  />
            <div @mouseout="changeCloseState(0,0)" @click.stop="removeImage(0)" @mouseover="changeCloseState(0,1)" :id="'close0'" :style="{ backgroundImage: 'url(' + close + ')', position: 'absolute',top: '0', left: '0px', width : '16px', height: '16px', backgroundSize: 'contain',opacity: 0 }" ></div>
          </el-upload>
        </div>
        <div v-if="moreCommentImgList.length > 0" v-for="(item,index) in moreCommentImgList" style="margin-right: 8px;">
          <el-upload class="avatar-uploader"  :action="uploadUrl" name="imgFile"
                     :on-success="photoUploadSuccess" :before-upload="beforePhotoUpload" @change="handleChange(index+1)"
                     list-type="picture-card" :auto-upload="true" :show-file-list="false" accept=".jpg,.png,.jpeg">
            <div v-if="commentImgList[index]== ''" class="el-upload__tip">+</div>
            <img @mouseout="changeCloseState(index+1,0)" @mouseover="changeCloseState(index+1,1)" v-if="commentImgList[index+1]" :src="commentImgList[index+1]" class="avatar" />
            <div @mouseout="changeCloseState(index+1,0)" @click.stop="removeImage(index+1)" @mouseover="changeCloseState(index+1,1)"  :id="'close'+ (index+1)" :style="{ backgroundImage: 'url(' + close + ')', position: 'absolute',top: '0px', left: '0px', width : '16px', height: '16px', backgroundSize: 'contain',opacity: 0 }" ></div>
          </el-upload>
        </div>
      </el-form-item>
      <el-form-item>
        <div style="display: flex;flex-direction: row;justify-content: center;">
          <el-button type="primary" @click="handleComment()">提交</el-button>
          <el-button type="default" @click="cancelComment()">取消</el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>
  <el-dialog v-model="noteMakeDialog" :width="650" title="保存笔记"  body-class="custom-body-class">
    <template #title>
      <div style="text-align: center;">保存笔记</div>
      <div style="height: 10px;border-bottom: 1px solid #d0cece;"></div>
    </template>
    <el-form label-width="0">
      <el-form-item>
        <el-input type="textarea" :rows="7" style="border-radius: 4px;border: 0;width: 590px;height: 160px;" resize='none'
                  autocomplete="off" v-model="noteContentForm" placeholder="请输入笔记内容"></el-input>
      </el-form-item>
      <el-form-item>
        <div style="display: flex;flex-direction: row;justify-content: center;width: 100%;">
          <el-button type="primary" @click="handleNoteSave()">保 存 </el-button>
          <el-button type="default" @click="cancelNoteMake()">取 消 </el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style src="@/pages/index/style/news_detail.css"  scoped></style>
<style>
.relate_title {
  font-size: 18px;
  color: #333333;
  line-height: 38px;
  font-weight: 700;
  padding-left: 10px;
}
.relate_title2 {
  font-size: 12px;
  color: #333333;
  line-height: 14px;
  font-weight: 200;
  padding-left: 40px;
  display: flex;
  flex-direction: row;
}
.text1 {
  font-size: 12px;
  line-height: 32px;
  color: #000;
}
.img-1 {
  width: 30px;
  line-height: 35px;
  height: 32px;
}
.img1 {
  margin-left: 12px;
  margin-right: 4px;
  width: 16px;
  height: 16px;
  line-height: 30px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center center;
}
.img2 {
  margin-left: 12px;
  margin-right: 4px;
  width: 24px;
  height: 24px;
}
.item {
  padding-right: 10px;
  height: 32px;
  border-radius: 449px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.item-no-hand {
  padding-right: 10px;
  height: 32px;
  font-size: 12px;
  border-radius: 449px;
  display: flex;
  align-items: center;
  cursor: default;
}
.item-like-a {
  display: flex;
  flex-direction: row;
  border-radius: 449px;
  width: 90px;
  height: 32px;
  font-size: 12px;
  line-height: 30px;
  background-color: #ffffff;
}
.item-like-a:hover {
  display: flex;
  flex-direction: row;
  width: 90px;
  height: 32px;
  line-height: 30px;
  font-size: 12px;
  opacity: 0.5;
  background-color: #ECECEC;
}
.item-like {
  background-color: #ffffff;
  color: #00bcfb;
  .text1 {
    color: #00bcfb;
  }
}
.icon1 {
  background: url() no-repeat center center / 100%;
  width: 16px;
  height: 16px;
  margin-right: 8px;
}
.avatar-uploader {
  width: 60px;
  height: 60px;
}
.el-upload--picture-card {
  width: 60px;
  height: 60px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.el-upload__tip {
  font-size: 20px;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
</style>
